import React, { Component } from 'react';
class InterView extends Component {
    constructor(props) {
        super(props);
    }
    state = { num:5 }
    componentDidUpdate(prevProps, prevState) {
        console.log("更新完毕")
    }
    render() { 
        return ( <div>

            <button onClick={()=>{
                // setState是state更新后执行回调函数
                this.setState({num:this.state.num+1})               
                this.setState({num:this.state.num+2})
                this.setState({num:this.state.num+3})
                this.setState({num:this.state.num+4})
                this.setState({num:this.state.num+5})

                // setState在生命周期和复合事件中式异步的，其他是同步的
                // setState内部是有优化的：
                // 1 多个setState相同是只执行一个
                // 2. 同时执行多个setState，会把所有的setState放入一个队列中
                // 3. 当队列完成后才进行虚拟dom的比较与真实dom的渲染
            }}>{this.state.num}</button>
        </div> );
    }
}
 
export default InterView;

// import React from 'react'
// function Title(props) {
//     return ( <h1 title={props.title}>希望被title</h1> );
// }

 
// function InterView() {
//     return ( <div>
//         <h3>createElement</h3>
//         {React.createElement("div",{id:"mydiv",children:"abc"})}
//         {React.cloneElement(<Title></Title>,{title:"你好"})}
        
//         <h3 onClick={e=>console.log(e)}>react事件的包装</h3>
//         <h3>虚拟dom：javascript对象形式模拟dom</h3>、
//         <code><pre>
//             <ul>
//                 <li><a href="#">文字</a></li>
//                 <li><a href="https://www.baidu.com">文字2</a></li>
//             </ul>
//         </pre></code>
//         <pre>
//             {/* 
//             {tag:"ul",children:[
//                 {tag:"li",children[{tag:"a",children:"文字",properties:{href="#"}}]}
//                 {tag:"li",children[{tag:"a",children:"文字2",properties:{href="https://www.baidu.com"}}]}
//             ]} 
//             */}
//         </pre>
//     </div> );
// }

// export default InterView;